<script>
import { reactive, ref, toRefs } from '@vue/reactivity'
import { useStore } from '../store'
import { useRouter,useRoute} from 'vue-router'
import { Toast } from 'vant'
    export default {
        setup() {
            let route=useRoute()
            let router=useRouter()
            
            let active=ref(0)
            active.value=route.query.active
            let dataFun=reactive({
                noorder:null,
                Toshipped:null,
                show:false,
                delivergoods:null,
                evaluated:null,
            })
            let store=useStore()
            // dataFun.order=store.order


            // let nopayment=()=>{
            //     dataFun.order=store.order.filter(item=>{
            //         return item.payment=="06"
            //     })
            //     console.log(dataFun.order);
            // }

            // 取消订单
            let cancel=(index)=>{
                store.noorder.splice(index,1)
            }

            // 去支付
            let gopay=(index)=>{
                dataFun.show=true
                store.order.unshift({
                    // store.noorder[index]
                    shopid:store.noorder[index].shopid,
                    url:store.noorder[index].url,
                    title:store.noorder[index].title,
                    newprice:store.noorder[index].newprice,
                    oldprice:store.noorder[index].oldprice,
                    value:store.noorder[index].value,
                    check:store.noorder[index].check,
                    free:store.noorder[index].free,
                    payment:"07",
                })
                getData()
                setTimeout(()=>{
                    dataFun.show=false
                    Toast("支付成功")
                    store.noorder.splice(index,1)
                    getData()
                },1500)
            }

            // 待发货=>发货
            let delivergood=(index)=>{
                dataFun.show=true
                store.delivergoods.push({
                    shopid:store.order[index].shopid,
                    url:store.order[index].url,
                    title:store.order[index].title,
                    newprice:store.order[index].newprice,
                    oldprice:store.order[index].oldprice,
                    value:store.order[index].value,
                    check:store.order[index].check,
                    free:store.order[index].free,
                    payment:"08",
                })
                getData()
                setTimeout(()=>{
                    dataFun.show=false
                    Toast("已发货")
                    store.order.splice(index,1)
                    getData()
                },1500)
            }

            // 已发货=>评价
            let Shipped=(index)=>{
                dataFun.show=true
                store.evaluated.unshift({
                    shopid:store.delivergoods[index].shopid,
                    url:store.delivergoods[index].url,
                    title:store.delivergoods[index].title,
                    newprice:store.delivergoods[index].newprice,
                    oldprice:store.delivergoods[index].oldprice,
                    value:store.delivergoods[index].value,
                    check:store.delivergoods[index].check,
                    free:store.delivergoods[index].free,
                    payment:"09",
                })
                getData()
                setTimeout(()=>{
                    dataFun.show=false
                    Toast("待评价")
                    store.delivergoods.splice(index,1)
                    getData()
                },1500)
            }

            // 去评价
            let goevaluated=(index)=>{
                console.log(index);
                router.push({
                    path:"/comment",
                    query:{
                        index
                    }
                })

            }


            function getData(){
                
                dataFun.noorder=store.noorder
                // .filter(item=>{//未支付
                //     return item.payment=="06"
                // })
                dataFun.Toshipped=store.order
                // .filter(e=>{
                //     return e.payment=="07"
                // })
                dataFun.delivergoods=store.delivergoods
                dataFun.evaluated=store.evaluated
            }

            getData()
            return {
                ...toRefs(dataFun),
                active,
                // nopayment,
                cancel,
                gopay,
                delivergood,
                Shipped,
                goevaluated
            }
        },
    }
</script>


<template>
    <div class="shopOrder">
        <div class="wrapper">
           <div class="header">
                <div class="header_left">
                    <router-link to="/user" class="icon_coo icon-a-ziyuan558"></router-link>
                    <div class="head_name">我的订单</div>
                </div>
            </div>
            <div class="tab">
                <van-tabs v-model:active="active">
                        <van-tab title="待付款" >
                         <!-- 商品 -->
                        <div class="buyshop">
                            <ul>
                                <li v-for="(item,index) in noorder" :key="index">
                                    <div class="lis">
                                        <div class="buyshop_center">
                                            <div class="img">
                                                <img :src="item.url" alt="">
                                            </div>
                                            <div class="word">
                                                <div class="word_title">{{item.title}}</div>
                                                
                                            </div>
                                        </div>
                                        <div class="buyshop_right">
                                            <div class="price">
                                                <div class="newprice">￥{{item.newprice}}</div>
                                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                                            </div>
                                            <div class="del">x{{item.value}}</div>
                                        </div>
                                    </div>
                                    <p class="Subtotal">共{{item.value}}件商品 &nbsp; 运费：包邮 &nbsp; 实付：<span><strong>￥{{item.value *item.newprice}}</strong></span></p>
                                    <div class="noor">
                                        <div class="cancelorder" @click="cancel(index)">取消订单</div>
                                        <div class="gopayment" @click="gopay(index)">去支付</div>
                                    </div>
                                </li>
                            </ul>
                        </div> 
                    </van-tab>
                    <van-tab title="待发货">
                         <!-- 商品 -->
                         <div class="buyshop">
                            <ul>
                                <li v-for="(item,index) in Toshipped" :key="index">
                                    <div class="lis">
                                        <div class="buyshop_center">
                                            <div class="img">
                                                <img :src="item.url" alt="">
                                            </div>
                                            <div class="word">
                                                <div class="word_title">{{item.title}}</div>
                                                
                                            </div>
                                        </div>
                                        <div class="buyshop_right">
                                            <div class="price">
                                                <div class="newprice">￥{{item.newprice}}</div>
                                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                                            </div>
                                            <div class="del">x{{item.value}}</div>
                                        </div>
                                    </div>
                                    <p class="Subtotal">共{{item.value}}件商品 &nbsp; 运费：包邮 &nbsp; 实付：<span><strong>￥{{item.value *item.newprice}}</strong></span></p>
                                    <div class="noor">
                                        <!-- <div class="cancelorder">取消订单</div> -->
                                        <div class="gopayment" @click="delivergood(index)">待发货</div>
                                    </div>
                                </li>
                            </ul>
                        </div> 
                    </van-tab>
                    <van-tab title="已发货">
                        <!-- 商品 -->
                         <div class="buyshop">
                            <ul>
                                <li v-for="(item,index) in delivergoods" :key="index">
                                    <div class="lis">
                                        <div class="buyshop_center">
                                            <div class="img">
                                                <img :src="item.url" alt="">
                                            </div>
                                            <div class="word">
                                                <div class="word_title">{{item.title}}</div>
                                                
                                            </div>
                                        </div>
                                        <div class="buyshop_right">
                                            <div class="price">
                                                <div class="newprice">￥{{item.newprice}}</div>
                                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                                            </div>
                                            <div class="del">x{{item.value}}</div>
                                        </div>
                                    </div>
                                    <p class="Subtotal">共{{item.value}}件商品 &nbsp; 运费：包邮 &nbsp; 实付：<span><strong>￥{{item.value *item.newprice}}</strong></span></p>
                                    <div class="noor">
                                        <!-- <div class="cancelorder">取消订单</div> -->
                                        <div class="gopayment" @click="Shipped(index)">已发货</div>
                                    </div>
                                </li>
                            </ul>
                        </div> 
                    </van-tab>
                    <van-tab title="待评价">
                         <!-- 商品 -->
                         <div class="buyshop">
                            <ul>
                                <li v-for="(item,index) in evaluated" :key="index">
                                    <div class="lis">
                                        <div class="buyshop_center">
                                            <div class="img">
                                                <img :src="item.url" alt="">
                                            </div>
                                            <div class="word">
                                                <div class="word_title">{{item.title}}</div>
                                                
                                            </div>
                                        </div>
                                        <div class="buyshop_right">
                                            <div class="price">
                                                <div class="newprice">￥{{item.newprice}}</div>
                                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                                            </div>
                                            <div class="del">x{{item.value}}</div>
                                        </div>
                                    </div>
                                    <p class="Subtotal">共{{item.value}}件商品 &nbsp; 运费：包邮 &nbsp; 实付：<span><strong>￥{{item.value *item.newprice}}</strong></span></p>
                                    <div class="noor">
                                        <!-- <div class="cancelorder">取消订单</div> -->
                                        <div class="gopayment" @click="goevaluated(index)">去评价</div>
                                    </div>
                                </li>
                            </ul>
                        </div> 
                    </van-tab>
                </van-tabs>
            </div>
            <div class="load" v-show="show">
                <van-loading type="spinner" color="#1989fa" />
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.shopOrder{
    .wrapper{
        .header{
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 5;
            width: 100%;
            // padding: 0 12px;
            height: 50px;
            border-bottom: 1px solid rgb(248, 235, 207);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .header_left{
                font-size: 18px;
                padding-left: 16px;
                display: flex;
                align-items: center;
                // .icon-a-ziyuan558{}
                .head_name{
                    font-weight: 600;
                    font-size: 18px;
                    padding-left: 30px;
                }
            }
        }
        .tab{
            padding-top: 51px;
            .van-tabs::v-deep .van-tabs__line{
                background: rgb(249, 199, 34);
            }
            .buyshop{     
                padding:  0px 16px;
                background-color: #fff;
                margin-bottom: 10px;
                ul{
                    // padding-bottom: 50px;
                    li{
                        border-bottom: 1px solid #ccc;
                        .lis{
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-start;
                            padding: 16px 0;

                            .buyshop_center{
                                display:flex;
                                align-items: center;
                                .buyshop_left{
                                    width: 16px;
                                    height: 16px;
                                    border: 1px solid #999;
                                    border-radius: 50%;
                                }
                                .buyshop_left.icon-xuanzhong{
                                    color: #feca3e;
                                    font-size: 18px;
                                    text-align: center;
                                    line-height: 16px;
                                    border: 1px solid #feca3e;
                                }
                                .img{
                                    margin:0 8px 0 0px;
                                    width: 80px;
                                    height: 80px;
                                    img{
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                                .word{
                                    display: flex;
                                    flex-direction: column;
                                    height: 80px;
                                    align-items: flex-start;
                                    justify-content: space-between;
                                    .word_title{
                                        font-size: 12px;
                                        width: 130px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                    .number{
                                        display: flex;
                                        text-align: center;
                                        line-height: 22px;
                                        .jian{
                                            width: 22px;
                                            height: 22px;
                                            // background-color: #ccc;
                                            border: 1px solid #ccc;
                                        }
                                        .digit{
                                            width: 22px;
                                            height: 22px;
                                            border: 1px solid #ccc;
                                            border-left: 0;
                                            font-size: 14px;
                                        }
                                        .add{
                                            width: 22px;
                                            height: 22px;
                                            border: 1px solid #ccc;
                                            border-left: 0;
                                        }
                                    }
                                }
                            }
                            .buyshop_right{
                                display: flex;
                                height: 80px;
                                flex-direction: column;
                                justify-content: space-between;
                                align-items: flex-end;
                                .price{
                                    display: flex;
                                    flex-direction: column;
                                    align-items: flex-end;
                                    .newprice{
                                        font-size: 13px;
                                        color: #f51505;
                                    }
                                    .oldprice{
                                        font-size: 10px;
                                        color: #999;
                                    }
                                }
                                .del{
                                    color: #999;
                                }
                            }
                        }
                    }
                }
                p.Subtotal{
                    text-align: right;
                    font-size: 12px;
                    color: #999;
                    padding: 12px 0;
                }
                .noor{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    margin-bottom: 20px;
                    .cancelorder{
                        color: #999;
                        border: 1px solid #999;
                        font-size: 14px;
                        padding: 5px 0;
                        width: 80px;
                        text-align: center;
                        border-radius: 18px;
                    }
                    .gopayment{
                        border: 1px solid #333;
                        color: #333;
                        font-size: 14px;
                        padding: 5px 0;
                        border-radius: 18px;
                        width: 80px;
                        text-align: center;
                        margin-left: 10px;
                    }
                }

            }
        }
        .load{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    }
}
</style>